<template>
  <div class="page-wrap">
    <div class="page-title">cdsCalculate 计算类型与规格</div>
    <p>该组件为计算类型与规格选择组件，包括三部分：</p>
    <p>1.vcpu及ram筛选框(可添加自定义筛选，插槽方式),筛选方法需要自行定义(接口获取或前端自行筛选)</p>
    <p>2.规格组radio-group筛选</p>
    <p>3.信息展示列表</p>
    <div class="page-sub-title">基本用法</div>
    <codeShow :code="code1">
      <CdsCalculate
        :category_list = "category_list"
        :cur_node_config_list = "cur_node_config_list"
        :after_select_list = "after_select_list"
        :tableColumnList = "tableColumnList"
        :backData = "backData"
        @vcpuChange="FnVcpuChange"
        @ramChange="FnRamChange"
        @categoryIdChange="FnCategoryIdChange"
        @selectRowChange="FnSelectRowChange">
        <template v-slot:select_slot>
          <cds-select 
              placeholder="全部显卡类型"
              clearable>
              <cds-option>
              </cds-option>
            </cds-select>
        </template>
      </CdsCalculate>
    </codeShow>
    <div class="page-sub-title">cdsCalculate API</div>
    <el-table :data="cdsCalculateAttributesTable" style="margin-top:20px;margin-bottom: 48px;">
      <el-table-column label="属性名" align="left" width="150" prop="attr"></el-table-column>
      <el-table-column label="说明" align="left" prop="illustrate"></el-table-column>
      <el-table-column label="类型" align="left" width="150" prop="type"></el-table-column>
      <el-table-column label="默认值" align="left" width="150" prop="default"></el-table-column>
      <el-table-column label="是否必传" align="left" width="100" prop="require"></el-table-column>
    </el-table>
    <div class="page-sub-title">cdsCalculate Events</div>
    <el-table :data="cdsCalculateEventTable" style="margin-top:20px;margin-bottom: 48px;">
      <el-table-column label="属性名" align="left" width="150" prop="attr"></el-table-column>
      <el-table-column label="说明" align="left" prop="illustrate"></el-table-column>
      <el-table-column label="类型" align="left" width="150" prop="type"></el-table-column>
      <el-table-column label="默认值" align="left" width="150" prop="default"></el-table-column>
      <el-table-column label="是否必传" align="left" width="100" prop="require"></el-table-column>
    </el-table>
    <div class="page-sub-titile">cdsCalculate Slots</div>
    <el-table :data="cdsCalculateSlotTable" style="margin-top:20px;margin-bottom: 48px;">
      <el-table-column label="插槽名" align="left" width="150" prop="slotName"></el-table-column>
      <el-table-column label="说明" align="left" prop="illustrate"></el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import {CdsCalculate} from 'cds-ui-business-components'
import codeShow from '../../components/code.vue';

// radio-group数据
const category_list = ref([
    {
      category_id: "f3973952-7918-11ec-a7a9-16cc3e7992e1",
      category_name: "GPU高性能型",
      isDisabled: false
    },{
      category_id: "f3973952-7918-11ec-a7a9-16ccsadsadw",
      category_name: "GPU低性能",
      isDisabled: false
    },{
      category_id: "f39739asd52-7918-11easdsad7a9-16ccsadsadw",
      category_name: "CPU高性能",
      isDisabled: false
    },
])

// table表格数据(总数据，无需传递给子组件，根据当前接口返回实际情况进行使用)
const all_node_config_list = ref([
  {
    bill_scheme_id: "3c22b01e-fb6f-11ed-976e-4248b6c5ce35",
    cpu: 2,
    cpu_name: "6240R/4210R",
    family_id: "09fb5a98-7919-11ec-a7a9-16cc3e7992e1",
    family_name: "GPU高性能型",
    goods_id: 8467,
    gpu: 1,
    gpu_show_type: "NVIDIA 3060",
    ram: 2,
    id: 0
  },
  {
    bill_scheme_id: "3c22b01e-fb6f-11ed-9sadwadsadadsad",
    cpu: 8,
    cpu_name: "6240R/421R",
    family_id: "09fb5a98-7s11ec-a7a9-16cc3e7992e1",
    family_name: "GPU高性能型",
    goods_id: 5567,
    gpu: 0,
    gpu_show_type: "NVIDIA 3060",
    ram: 32,
    id: 1
  },
  {
    bill_scheme_id: "3c22b01e-fb6f-11ed-976e-4248b6c5ce35",
    cpu: 16,
    cpu_name: "6240R/4210R",
    family_id: "09fb5a98-7919-11ec-a7a9-16cc3e7992e1",
    family_name: "GPU低性能",
    goods_id: 8467,
    gpu: 5,
    gpu_show_type: "NVIDIA 3060",
    ram: 16,
    id: 2
  },
  {
    bill_scheme_id: "3c22b01e-fb6fsadsadwadasd",
    cpu: 16,
    cpu_name: "6240R/4210R",
    family_id: "09fb5a98-7919-11ec-a7a9-16cc3e7992e1",
    family_name: "GPU低性能",
    goods_id: 8467,
    gpu: 5,
    gpu_show_type: "NVIDIA 3060",
    ram: 32,
    id: 4
  },
  {
    bill_scheme_id: "3c22b01e-fb6f-11ed-976edsad-4248b6c5ce35",
    cpu: 64,
    cpu_name: "6240R/4210R",
    family_id: "09fb5a98-7919-11ec-a7a9-16cdsdc3e7992easds1",
    family_name: "CPU高性能",
    goods_id: 8467,
    gpu: 5,
    gpu_show_type: "NVIDIA 3060",
    ram: 128,
    id: 3
  },
  {
    bill_scheme_id: "3c22b01e-fb6fsadsadwadasd",
    cpu: 16,
    cpu_name: "6240R/4210R",
    family_id: "09fb5a98-7919-11ec-a7a9-16cc3e7992e1",
    family_name: "GPU低性能",
    goods_id: 8467,
    gpu: 5,
    gpu_show_type: "NVIDIA 3060",
    ram: 32,
    id: 5
  },
  {
    bill_scheme_id: "3c22b01e-fb6fsadsadwadasd",
    cpu: 16,
    cpu_name: "6240R/4210R",
    family_id: "09fb5a98-7919-11ec-a7a9-16cc3e7992e1",
    family_name: "GPU低性能",
    goods_id: 8467,
    gpu: 5,
    gpu_show_type: "NVIDIA 3060",
    ram: 32,
    id: 6
  },
  {
    bill_scheme_id: "3c22b01e-fb6fsadsadwadasd",
    cpu: 16,
    cpu_name: "6240R/4210R",
    family_id: "09fb5a98-7919-11ec-a7a9-16cc3e7992e1",
    family_name: "GPU低性能",
    goods_id: 8467,
    gpu: 5,
    gpu_show_type: "NVIDIA 3060",
    ram: 32,
    id: 7
  },
])

// 当前展示table项(总数据中筛选)
const cur_node_config_list = ref([])

// vcpu及ram筛选框信息
const after_select_list = ref({
  2: [2, 4],
  8: [32],
  12: [24],
  16: [32, 64],
  32: [64],
  64: [128]
})

// 列表项
const tableColumnList = ref([
  {
    label: '规格族',
    prop: 'family_name'
  },{
    label: 'vCPU',
    prop: 'cpu'
  },{
    label: '内存',
    prop: 'ram'
  },{
    label: 'GPU',
    prop: 'gpu'
  },{
    label: '处理器型号',
    prop: 'cpu_name'
  }
])

// 需要回显参数(可不传)
const backData = ref({
  vcpu: 2,
  ram: 2,
  id: 4,
  category_id: 'f3973952-7918-11ec-a7a9-16ccsadsadw'
})

// 当前vcpu
const FnVcpuChange = (val) => {
  console.log('父组件 vcpu', val)
}
// 当前ram
const FnRamChange = (val) => {
  console.log('父组件 ram', val)
}

// 获取当前规格组id
const FnCategoryIdChange = (obj) => {
  console.log('父组件 规格组', obj)
  cur_node_config_list.value = all_node_config_list.value.filter(item => obj.category_name === item.family_name)
}

// 当前选中行
const FnSelectRowChange = (row) => {
  console.log('父组件 当前行', row)
}

// =======================================================================
const code1 = `
<CdsCalculate
  :category_list = "category_list"
  :cur_node_config_list = "cur_node_config_list"
  :after_select_list = "after_select_list"
  :tableColumnList = "tableColumnList"
  :backData = "backData"
  @vcpuChange="FnVcpuChange"
  @ramChange="FnRamChange"
  @categoryIdChange="FnCategoryIdChange"
  @selectRowChange="FnSelectRowChange">
  <template v-slot:select_slot>
    <cds-select 
        placeholder="全部显卡类型"
        clearable> 
        <cds-option>
        </cds-option>
      </cds-select>
  </template>
</CdsCalculate>
// ===================使用数据=====================
// radio-group数据
const category_list = ref([
    {
      category_id: "f3973952-7918-11ec-a7a9-16cc3e7992e1",
      category_name: "GPU高性能型",
      isDisabled: false
    },{
      category_id: "f3973952-7918-11ec-a7a9-16ccsadsadw",
      category_name: "GPU低性能",
      isDisabled: false
    },{
      category_id: "f39739asd52-7918-11easdsad7a9-16ccsadsadw",
      category_name: "CPU高性能",
      isDisabled: false
    },
])
// table表格数据(总数据，无需传递给子组件，根据当前接口返回实际情况进行使用)
const all_node_config_list = ref([
{
    bill_scheme_id: "3c22b01e-fb6f-11ed-976e-4248b6c5ce35",
    cpu: 2,
    cpu_name: "6240R/4210R",
    family_id: "09fb5a98-7919-11ec-a7a9-16cc3e7992e1",
    family_name: "GPU高性能型",
    goods_id: 8467,
    gpu: 1,
    gpu_show_type: "NVIDIA 3060",
    ram: 2,
    id: 0
  },
  {
    bill_scheme_id: "3c22b01e-fb6f-11ed-9sadwadsadadsad",
    cpu: 8,
    cpu_name: "6240R/421R",
    family_id: "09fb5a98-7s11ec-a7a9-16cc3e7992e1",
    family_name: "GPU高性能型",
    goods_id: 5567,
    gpu: 0,
    gpu_show_type: "NVIDIA 3060",
    ram: 32,
    id: 1
  },
  {
    bill_scheme_id: "3c22b01e-fb6f-11ed-976e-4248b6c5ce35",
    cpu: 16,
    cpu_name: "6240R/4210R",
    family_id: "09fb5a98-7919-11ec-a7a9-16cc3e7992e1",
    family_name: "GPU低性能",
    goods_id: 8467,
    gpu: 5,
    gpu_show_type: "NVIDIA 3060",
    ram: 16,
    id: 2
  },
  {
    bill_scheme_id: "3c22b01e-fb6fsadsadwadasd",
    cpu: 16,
    cpu_name: "6240R/4210R",
    family_id: "09fb5a98-7919-11ec-a7a9-16cc3e7992e1",
    family_name: "GPU低性能",
    goods_id: 8467,
    gpu: 5,
    gpu_show_type: "NVIDIA 3060",
    ram: 32,
    id: 4
  },
  {
    bill_scheme_id: "3c22b01e-fb6f-11ed-976edsad-4248b6c5ce35",
    cpu: 64,
    cpu_name: "6240R/4210R",
    family_id: "09fb5a98-7919-11ec-a7a9-16cdsdc3e7992easds1",
    family_name: "CPU高性能",
    goods_id: 8467,
    gpu: 5,
    gpu_show_type: "NVIDIA 3060",
    ram: 128,
    id: 3
  }   
])

// 当前展示table项(总数据中筛选)
const cur_node_config_list = ref([])

// vcpu及ram筛选框信息
const after_select_list = ref({
  2: [2, 4],
  8: [32],
  12: [24],
  16: [32, 64],
  32: [64],
  64: [128]
})

// 列表项
const tableColumnList = ref([
  {
    label: '规格族',
    prop: 'family_name'
  },{
    label: 'vCPU',
    prop: 'cpu'
  },{
    label: '内存',
    prop: 'ram'
  },{
    label: '规格族',
    prop: 'family_name'
  },{
    label: 'GPU',
    prop: 'gpu'
  },{
    label: '处理器型号',
    prop: 'cpu_name'
  }
])

// 需要回显参数(可不传)
const backData = ref({
  vcpu: 2,
  ram: 2,
  id: 4,
  category_id: 'f3973952-7918-11ec-a7a9-16ccsadsadw'
})

// 当前vcpu
const FnVcpuChange = (val) => {
  console.log('父组件 vcpu', val)
}
// 当前ram
const FnRamChange = (val) => {
  console.log('父组件 ram', val)
}

// 获取当前规格组id
const FnCategoryIdChange = (obj) => {
  console.log('父组件 规格组', obj)
  cur_node_config_list.value = all_node_config_list.value.filter(item => obj.category_name === item.family_name)
}
`

const cdsCalculateAttributesTable = [
  {'attr': 'after_select_list', 'illustrate': 'vcpu与ram列表', 'type': 'Array', 'default': '[]', 'require': '必传'},
  {'attr': 'category_list', 'illustrate': '规格族筛选', 'type': 'Array', 'default': '[]', 'require': '必传'},
  {'attr': 'cur_node_config_list', 'illustrate': '计算类型与规格table表格数据', 'type': 'Array', 'default': '[]', 'require': '必传'},
  {'attr': 'tableColumnList', 'illustrate': '计算类型与规格table每一列对应label和prop', 'type': 'Array', 'default': '[]', 'require': '必传'},
  {'attr': 'backData', 'illustrate': '数据回显信息', 'type': 'Object', 'default': '{}', 'require': '非必传'},
]

const cdsCalculateEventTable = [
  {'attr': 'FnVcpuChange', 'illustrate': 'vcpu切换回调钩子', 'type': 'Function', 'default': '--', 'require': '--'},
  {'attr': 'ramChange', 'illustrate': 'ram切换回调钩子', 'type': 'Function', 'default': '--', 'require': '--'},
  {'attr': 'categoryIdChange', 'illustrate': '规格族分类切换钩子', 'type': 'Function', 'default': '--', 'require': '--'},
  {'attr': 'selectRowChange', 'illustrate': '勾选table表格中具体项钩子', 'type': 'Function', 'default': '--', 'require': '--'},
]

const cdsCalculateSlotTable = [
  {'slotName': 'select_slot', 'illustrate': '自定义剩余搜索内容'}
]
</script>
<style scoped>

</style>